<%--
  Created by IntelliJ IDEA.
  User: hubin
  Date: 2016/6/14
  Time: 10:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="widget-title"><span class="icon"> <i class="icon-briefcase"></i> </span>
    <h5>话 题</h5>

    <span class="label label-info"> <a href="#myModal" data-toggle="modal"><span
            style="color: #ffffff">新增话题</span></a></span>
</div>
<div class="widget-content" ms-controller="topic">

    <div style="width: 100%;height:40px;text-align: center;">

        <div style="width: 600px;height: 40px; margin-left: auto;margin-right: auto;">

            <input type="text" class="span1" style="height: 40px;width: 500px;float: left;" ms-duplex="@keyword">
            <div style=" height:40px;width: 100px;background-color: #2a65ff ;float: left;" ms-click="@cheak()">
                <p style="line-height: 40px;height: 40px;margin-left: auto;margin-right: auto;color: #ffffff;size: 12px;">
                    查询</p>
            </div>
        </div>
    </div>
    <div class="row-fluid" style="clear: both;text-align: center;">
        <div class="span2" style="height: 250px;background-color: #ffffff;float: left;margin: 10px;"
             ms-for="(index,el) in @topiclist" ms-click="@showupdatetopic(el)">
            <div ms-if="index % 6 == 0 " style="width: 100%;height: 10px;background-color: #08ff0a"></div>
            <div ms-if="index % 6 == 1 " style="width: 100%;height: 10px;background-color: #31ffe4"></div>
            <div ms-if="index % 6 == 2 " style="width: 100%;height: 10px;background-color: #1fc0ff"></div>
            <div ms-if="index % 6 == 3 " style="width: 100%;height: 10px;background-color: #c93cff"></div>
            <div ms-if="index % 6 == 4 " style="width: 100%;height: 10px;background-color: #ff27b5"></div>
            <div ms-if="index % 6 == 5 " style="width: 100%;height: 10px;background-color: #ff111d"></div>
            <div style="text-align: center">
                <h4 style="margin-left: auto;margin-left: auto;">{{el.title}}</h4>
                <p style="text-align: right;float: right;margin-right: 15px;">{{el.createTime| datetostring |
                    date("yyyy-MM-dd")}}</p>
            </div>
            <div style="clear: both;">
                <p style="margin-left: 5px;margin-right: 5px;margin-top: 10px;">
                    {{el.content}}</p>
            </div>
        </div>
    </div>
    <div style=" height: 30px;"
         class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers">
        <a style=" height: 30px;width: 40px; line-height:30px;text-align: center ;"
           class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default" ms-click="@firstPage()">首页</a>
        <a style=" height: 30px;width: 40px;line-height:30px;text-align: center ;"
           class="previous fg-button ui-button ui-state-default " ms-click="@previousPage()">上一页</a>
        <span>
        <a style=" height: 30px;width: 100px;line-height:30px;text-align: center ;"
           class="fg-button ui-button ui-state-default">{{@pageCurrent}} / {{@pageTotle}}</a>

        </span>
        <a style=" height: 30px;width: 40px;line-height:30px;text-align: center ;"
           class="next fg-button ui-button ui-state-default" ms-click="@nextPage()">下一页</a>
        <a style=" height: 30px;width: 40px;line-height:30px;text-align: center ;"
           class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default" ms-click="@lastPage()"
        >尾页</a>
    </div>

    <!-- 添加产品 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" style="display: none;"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加话题
                    </h4>
                </div>
                <div class="modal-body">

                    <div class="control-group">
                        <label class="control-label">话题主题 :</label>
                        <div class="controls">
                            <input type="text" class="span12" placeholder="请输入话题主题" ms-duplex="@topicItem.title"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">创建时间 :</label>
                        <div class="controls">
                            <input id="addTime" type="text" class="span12" placeholder="请输入创建时间"
                                   ms-duplex="@topicItem.createTime"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">详细介绍 :</label>
                        <div class="controls">
                            <textarea class="span12" placeholder="请输入话题详细介绍" ms-duplex="@topicItem.content"></textarea>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" ms-click="@addTopic()">
                        添加
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="updatetopicModel" role="dialog" style="display: none;" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        话题详情
                    </h4>
                </div>
                <div class="modal-body">

                    <div class="control-group">
                        <label class="control-label">话题主题 :</label>
                        <div class="controls">
                            <input type="text" class="span12" placeholder="请输入产品名称" ms-duplex="@uptatetopic.title"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">创建时间 :</label>
                        <div class="controls">
                            <input readonly="true" type="text" class="span12 form-control m-ctrl-medium date-picker"
                                   placeholder="请输入产品下架时间"
                                   ms-duplex="@uptatetopic.createTime"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">产品介绍 :</label>
                        <div class="controls">
                            <textarea class="span12" placeholder="请输入产品详细介绍"
                                      ms-duplex="@uptatetopic.content"></textarea>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-default" ms-click="@delTopic()"
                            data-dismiss="modal">删除
                    </button>
                    <button type="button" class="btn btn-primary" ms-click="@updateTopic()">
                        修改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
